
<template>
<!-- <h2>
    <div class="div-class">123</div>
    <My-page></My-page>
    <h2 ref="refDiv">{{num}}</h2>
    <button @click="changenum">changenum</button>
</h2> -->

<div>
<!-- 路由写法一 -->
    <!-- <router-link to="/home">首页</router-link> &nbsp;
    <router-link to="/user">用户中心</router-link> &nbsp;
    <router-link to="/goods">购物车</router-link> -->
<!-- 路由写法二 -->
    <router-link :to="{ path:'home' , query:{a:123,b:456}}">首页</router-link> &nbsp;
    <router-link :to="{path:'user' }">用户中心</router-link> &nbsp;
    <router-link :to="{path:'goods'}">购物车</router-link>

    <router-view></router-view>
</div>
</template>

<script>
// 导入组件
// import MyPage from './views/MypageView.vue'
export default {
    data(){
        return{
            num:100,
           
        }   
    },
    methods:{
        changenum(){
            this.num++;
            console.log(this.$refs.refDiv);
            // DOM元素的更新延迟 用nextTick() 方法可以等待页面dom更新完毕后再获取
            this.$nextTick(()=>{
                console.log(this.$refs.refDiv.innerHTML);
            })
            // 正常获取会有延迟
                console.log(this.$refs.refDiv.innerHTML);
        }
    },
    components:{
        // MyPage
    }
}
</script>

<style>
.div-class{
    color: pink
}
</style>
